<div xmlns:th="https://www.thymeleaf.org"
     th:fragment="widget (sidebar)"
     th:class="'card widget wechat ' + ${sidebar.hide}"
     th:with="faceImg = ${theme.config.sidebar.wechat.wechat_img_face},
              backImg = ${theme.config.sidebar.wechat.wechat_img_back},
              wechatUrl = ${theme.config.sidebar.wechat.wechat_url}">
    <a class="flip-wrapper" th:classappend="${!#strings.isEmpty(wechatUrl)}? 'pointer'" th:aria-label="#{widget.wechat.desc}" th:title="#{widget.wechat.desc}"
        th:href="${!#strings.isEmpty(wechatUrl) ? wechatUrl : (!#strings.isEmpty(faceImg) ? faceImg : (!#strings.isEmpty(backImg) ? backImg : '#'))}"
        th:onclick="${#strings.isEmpty(wechatUrl)} ? 'event.preventDefault();'" target="_blank">
        <div th:class="${!#strings.isEmpty(faceImg) && !#strings.isEmpty(backImg) ? 'flip-content animation' : 'flip-content'}">
            <div class="wechatFace" th:style="|background-color: ${theme.config.sidebar.wechat.wechat_img_face_color};|">
                <img th:if="${!#strings.isEmpty(faceImg)}" height="auto" width="100%" th:src="${faceImg}" th:alt="#{widget.wechat.desc}"/>
            </div>
            <div th:class="${!#strings.isEmpty(faceImg) && !#strings.isEmpty(backImg) ? 'wechatBack animation' : 'wechatBack'}" th:classappend="${#strings.isEmpty(faceImg)}? 'show'"
                 th:style="|background-color: ${theme.config.sidebar.wechat.wechat_img_back_color};|">
                <img th:if="${!#strings.isEmpty(backImg)}" height="auto" width="100%" th:src="${backImg}" th:alt="#{widget.wechat.desc}"/>
            </div>
        </div>
    </a>
</div>
